<template>
    <el-dialog top="5%" :title="title" size="large" v-model="editFormVisible" :close-on-click-modal="false">
        <Approve @onApproveSuc="onApproveSuc" :showcontent="showcontent" ref="approve" v-if="ApproveID"></Approve>
        <el-tag v-if="ApproveID"  style="font-size: larger; margin: 30px 0px 10px 20px;">发货单详情</el-tag>
        <div style="border: 1px solid #bbb; padding: 20px;">
            <el-form  ref="form" :model="form" :inline="true" :rules="rules" label-width="110px">
                <el-form-item label="采购单编号" placeholder="请选择"  prop="FApplyNo">
                    <sy-select v-model="form.FApplyNo" @change="changeApply"  valueKey="FApplyNo"
                               labelKey="FApplyNo" style="width:250px" optionData="server/business/Apply.ashx?cmd=GetOptions">
                    </sy-select>
                </el-form-item>
                <el-form-item label="发货时间">
                    <el-date-picker type="date"  v-model="form.FDeliveryTime"  style="width:250px"></el-date-picker>
                </el-form-item>
                <el-form-item label="收货人" placeholder="请选择"  prop="FShippingUser">
                    <sy-select v-model="form.FShippingUser"  valueKey="FID" style="width:250px"
                               optionData="server/system/User.ashx?cmd=GetUserOptions">
                    </sy-select>
                </el-form-item>
                <el-form-item label="收货地址">
                    <el-input v-model="form.FShippingAddress" style="width:250px;"></el-input>
                </el-form-item>
                <el-form-item label="项目" placeholder="请选择"  prop="FProjectID">
                    <sy-select v-model="form.FProjectID"  valueKey="FID" style="width:250px"
                               optionData="server/setting/Project.ashx?cmd=GetOptions">
                    </sy-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.FNote" style="width:250px;"></el-input>
                </el-form-item>
            </el-form>

            <el-table
                    :data="listdata"
                    border
                    v-loading="listLoading"
                    style="width: 100%">
                <el-table-column
                        prop="FProductID"
                        label="产品"
                        width="250">
                    <template scope="scope">
                        <sy-select v-model="scope.row.FProductID" valueKey="FID" @change="changeproduct" :extendData="scope.row"
                                   :optionData="'server/setting/Product.ashx?cmd=GetOptions&where='+productwhere">
                        </sy-select>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="ProductModel"
                        label="规格"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="ProductUnitName"
                        label="单位"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="FPrice"
                        label="单价"
                        width="120">
                    <template scope="scope">
                        <el-input type="number" @change="datachange(scope.row)"  v-model="scope.row.FPrice"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="FQuantity"
                        label="数量"
                        width="120">
                    <template scope="scope">
                        <el-input type="number" @change="datachange(scope.row)"  v-model="scope.row.FQuantity"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="Total"
                        label="总价"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop=""
                        label="操作">
                    <template scope="scope">
                        <a  href="javascript:;" @click="addRow"><i style="color:#8391a5" class="el-icon-plus"></i></a>

                        <a style="margin-left: 10px;"  href="javascript:;" @click="delRow(scope.$index)"><i style="color:#8391a5" class="el-icon-delete"></i></a>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取 消</el-button>
            <el-button type="primary" v-if="showSave" @click="save" :loading="loading">保存</el-button>
        </div>

    </el-dialog>

</template>

<script>
    import util from '../../common/util'
    import mixin from '../../common/mixin'
    import Approve from './Approve.vue'
    import Vue from 'vue'
    export default {
        components:{
            Approve:Approve
        },
        data() {
            return {
                form: {},
                showSave:true,
                rules: {
                    // FName: [{type: "date",name:"FCreateDate",text:"跟进时间", value: null}]
                },
                loading:false,
                editFormVisible:false,
                title:'',
                listdata: [],
                listLoading:false,
                ApproveID:null,
                showcontent:true
            }
        },
        computed: {
            productwhere: function () {
                let result=[]
                for(let pro of this.listdata){
                    if(pro.FProductID) {
                        result.push(pro.FProductID)
                    }
                }
                if(result.length==0)
                {
                    return ""
                }
                return ','+result.join(',')+','
            }

        },
        methods: {
            switchLoading(flag){
                this.loading = flag;
            },
            _openEdit(record) {
                this.editFormVisible = true;
                this.form = Object.assign({},record);
                this.title = '编辑'
                util.get("server/business/DeliveryDetail.ashx?cmd=GetList",
                    {where:"FDeliveryID="+this.form.FID},this.switchLoading,result=>{
                        this.listdata = result.listdata
                    })
            },
            _openAdd(record) {
                this.editFormVisible = true;
                this.form = {FID:0,FApplyNo:'',FDeliveryTime:'',FShippingUser:'',FShippingAddress:'',
                    FAddTime:new Date(),FDeliveryUser:global.user.FID,listdata:[],FApproveStatus:0};
                this.title = '新增'
                this.listdata.push({FProductID: '',ProductModel:'',Quantity: '',FPrice:'',Quantity:'',Total:null})
            },
            _openApprove(record,ApproveID) {
                this.editFormVisible = true;
                this.ApproveID = ApproveID
                this.form = Object.assign({},record);
                if(record.FApproveStatus!=0&&record.FApproveStatus!=-1){
                if((record.FToApprover!=global.user.FID)||record.FApproveStatus==3)
                {
                    this.showSave=false
                    this.showcontent=false
                    this.title='查看'
                }
                else {
                    this.title='审核'
                }
                }
                if(record.FApproveStatus==0||record.FApproveStatus==-1) {
                    this.title= "提交审核"
                }
                    util.get("server/business/DeliveryDetail.ashx?cmd=GetList",
                    {where:"FDeliveryID="+this.form.FID},this.switchLoading,result=>{
                        this.listdata = result.listdata
                    })
                this.$nextTick(()=>{
                    this.$refs.approve._init(record,ApproveID);
                })

            },
            save:function () {
                if(this.form.FApplyNo=="") {
                    util.msgWarning("请选择采购单编号");
                    return;
                }
                if(!this.listdata || this.listdata.length==0) {
                    util.msgWarning("请选择要发出的货物");
                    return;
                }
                this.form.listdata = JSON.stringify(this.listdata);
                util.post("server/business/Delivery.ashx?cmd=Save",this.form,this.switchLoading,result=> {
                    util.msgSuc("保存成功")
                    if(!this.ApproveID) {
                        this.editFormVisible = false
                        this.$emit("onSaveSuc", this.form)
                    }
                })
            },
            changeproduct(val,record,row){
                row.ProductModel = record.FModel
                row.ProductUnitName = record.UnitName
                row.FPrice = record.FPrice
                row.Total = ''
                row.Quantity=''
            },
            addRow(){
                this.listdata.push({FProductID: '',ProductModel:'',Quantity: '',FPrice:'',Quantity:'',Total:null})
            },
            delRow(index){
                this.listdata.splice(index,1);
                if(this.listdata.length==0)
                {
                    this.listdata.push({FProductID: '',ProductModel:'',Quantity: '',FPrice:'',Quantity:'',Total:null})
                }
            },
            datachange(row){
                row.Total = row.FPrice*row.FQuantity;
            },
            onApproveSuc()
            {
                global.bus.$emit('RefreshMsgCount')
                this.editFormVisible = false
                this.$emit("onSaveSuc", this.form)
            },
            changeApply(val,record,row){
                if(val!="")
                {
                util.get("server/business/ApplyDetail.ashx?cmd=GetList",
                    {where:"FApplyID="+record.FID},this.switchLoading,result=>{
                        this.listdata = []
                        this.$nextTick(()=>{
                            this.listdata = result.listdata
                        })
                    })
            }else{
                    this.listdata = []
                    this.listdata.push({FProductID: '',ProductModel:'',Quantity: '',FPrice:'',Quantity:'',Total:null})
                }
            }
        },
        mounted() {

        }
    }
</script>
